<template>
  <div class="qc-date-tab-wrap" :tabData="prop.tabData">
    <div class="left">
      <div class="labelName">统计时间</div>
      <div class="tabs">
        <div
          class="tab-item"
          :class="prop.tabData.timeType == item.id ? 'active' : ''"
          :key="item.id"
          v-for="item in list"
          @click="changeTab(item.id)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="date-wrap">
        <el-date-picker
          v-if="prop.tabData.timeType == '0'"
          v-model="prop.tabData.time"
          popper-class="qc-date"
          type="date"
          placeholder="请选择日期"
          valueFormat="YYYY-MM-DD"
          prefix-icon="Clock"
          @change="changeDate"
        />
        <el-date-picker
          v-if="prop.tabData.timeType == '1'"
          v-model="prop.tabData.time"
          popper-class="qc-date"
          type="month"
          placeholder="请选择月份"
          valueFormat="YYYY-MM"
          prefix-icon="Clock"
          @change="changeDate"
        />
        <el-date-picker
          v-if="prop.tabData.timeType == '2'"
          v-model="prop.tabData.time"
          popper-class="qc-date"
          type="year"
          placeholder="请选择年份"
          valueFormat="YYYY"
          prefix-icon="Clock"
          @change="changeDate"
        />
      </div>
    </div>
    <div class="right">
      <!-- <el-form>
        <el-form-item label="电站名称">
          <el-input
            v-model.trim="data.orgName"
            placeholder="请输入电站名称"
            clearable
          />
        </el-form-item>
      </el-form>
      <div class="query-btn">
        <el-button type="primary" @click.stop="handleQuery">统计</el-button>
        <el-button type="default" @click.stop="handleReset">重置</el-button>
      </div> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import moment from 'moment';
interface Props {
  list?: any;
  tabData?: any;
}
const prop = withDefaults(defineProps<Props>(), {
  timeType: '0',
  list: [
    {
      id: '0',
      title: '按日',
    },
    {
      id: '1',
      title: '按月',
    },
    {
      id: '2',
      title: '按年',
    },
  ],
  tabData: {
    timeType: '0',
    time: moment().format('YYYY-MM-DD'),
  },
});

// const data = reactive({
//   timeType: '0',
//   time: moment().format('YYYY-MM-DD'),
//   // orgName: ''
// });

const changeTab = (e: any) => {
  console.log('changeTab=====', e);
  prop.tabData.timeType = e;
  if (e === '0') {
    prop.tabData.time = moment().format('YYYY-MM-DD');
  } else if (e === '1') {
    prop.tabData.time = moment().startOf('month').format('YYYY-MM');
  } else if (e === '2') {
    prop.tabData.time = moment()
      .year(moment().year() - 1)
      .startOf('year')
      .format('YYYY');
  }
  console.log(moment().format('YYYY-MM-DD'));
  console.log(moment().subtract(1, 'days').format('YYYY-MM-DD'));
  console.log(moment().startOf('month').format('YYYY-MM'));
  console.log(
    moment()
      .year(moment().year() - 1)
      .startOf('year')
      .format('YYYY')
  );
  emit('data', prop.tabData);
};

changeTab('0');

console.log(prop.tabData);

const changeDate = (e: any) => {
  prop.tabData.time = e;
  emit('changeDate', prop.tabData);
};

const emit = defineEmits(['data', 'changeDate']);

// // 重置按钮
// const handleReset = () => {
//   // search.ruleForm = {};
//   // page.pageNo = 1;
//   // getData();
// };

// const handleQuery = () => {
//   // page.pageNo = 1;
//   // getData();
//   // console.log('ruleForm---', search.ruleForm);
// };
</script>

<style lang="scss">
.qc-date-tab-wrap {
  padding: 6px 24px;
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    .labelName {
      font-size: 13px;
      color: #000;
      line-height: 32px;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
    .tabs {
      display: flex;
      height: 32px;
      .tab-item {
        font-size: 13px;
        color: #5073f7;
        padding: 6px 16px;
        border: 1px solid #c4c4c4;
        border-left: 0;
        text-align: center;
        cursor: pointer;
        &:first-child {
          border-radius: 8px 0px 0px 8px;
          border-left: 1px solid #c4c4c4;
        }
        &:last-child {
          border-radius: 0px 8px 8px 0px;
        }
      }
      .active {
        background: #e5e8f6;
      }
    }

    .date-wrap {
      margin-left: 16px;
      width: 280px;
      .el-date-editor {
        width: 100%;
      }
    }
  }

  .right {
    display: flex;
  }

  // .title-wrap {
  //   padding: 12px 0;
  // }
  // .title {
  //   padding-left: 12px;
  //   color: var(--el-color-primary);
  //   font-size: 12px;
  //   box-sizing: border-box;
  //   border-left: 4px solid var(--el-color-primary);
  // }
  // .head-btn {
  //   position: absolute;
  //   right: 20px;
  //   top: 6px;
  // }
  // .head-tip {
  //   display: flex;
  //   margin: 20px 0;
  //   font-size: 10px;
  //   color: var(--el-color-primary);
  //   .icon {
  //     width: 16px;
  //     height: 16px;
  //     margin-right: 6px;
  //     background-image: url(@/assets/images/head-tip.png);
  //     background-repeat: no-repeat;
  //     background-size: 16px;
  //   }
  //   &.left-8 {
  //     margin-left: 40px;
  //   }
  // }
}
.edit-line {
  width: 100%;
  height: 1px;
  background-color: #f0f0f0;
}
</style>